mvaneijgen

I've resized my browser multiple ways, but I cant anything going wrong. Do you maybe have a screenshot or screen recording of the issue you're seeing? What I would recommend is wrapping all the GSAP code in a .matchMedia() function and have it setup so that only one of the setups can be active at a time, if you do the matchMedia function will do all the clean up for you so that you don't have to worry about it. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/jOoyQEB?editors=0010

Hi @techwithjenn welcome to the forum! As you can see in your log cSpell is giving you this error ( it looks like it's vscode extension that does spell checking https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) And it is correct in thing that gsap is not a word in the dictionary, so if you want to get rid of this error you'll have to check cSpell their docs how to add a word to the ignore list. Hope it helps and happy tweening!

I've done some tweaks and add 180 degrees to each element and this seem to do the trick. I've also updated to the latest version of GSAP. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/mdYRLRB?editors=1000

You've miss spelled trigegr in your ScrollTrigger setup it should be trigger: ".squar", if you change this everything works as expected. Just as a side note it is a good idea to get in to the habit of not animating your trigger element, so instead of using .squar as your trigger I would wrap it in another element called something like .trigger and use that, this will save you a lot a debugging in the future. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/JjqEMxN?editors=0010

Hi @Bobby18 welcome to the forum! We ask for a minmal demo, so that we can dive directly in to the code and don't have set it up ourself before we can help you. If you would be so kind to create a minimal demo in one of the places provided were codepen is the easiest of the bunch, then someone here will be surely able to help you. I've also split your question from the original topic, no need to bother all those people 4 years later. Below a pen you can fork and place your code in. https://codepen.io/GreenSock/pen/aYYOdN

Hi @OyabunG welcome to the forum! Everything is possible with GSAP, it just depends how much time you want to invest to get things working. You could look in to SVG clipPaths. https://codepen.io/mvaneijgen/pen/bGQjVxq I've written a guide how they work. If you still need help after that please share a minimal demo with what you've already tried. We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools Hope it helps and happy tweening!

Just setting the end trigger to "bottom bottom" fires onLeave when I scroll to the bottom of the page. What exactly is not working in your case? https://codepen.io/mvaneijgen/pen/rNgjadx?editors=1111

Hi @elderspite welcome to the forum! When you want to target a class you have to prefix it with a dot eg spinme becomes .spinme If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/YzbNPYE?editors=1010

I'm not sure why you would need flip for that. If you create a timeline you can just mix and match Flip with normal tweens and combine them in to one animation. When animating complex strings you have to make sure all the suffix are the same, eg in your case suffix all the values with a % sign. You can read more about this here In your Flip state you tell it to capture the clipPath, but none of the elements you 'watch' have a clip path property, only your <img> tag has this property, to that is also the element you want to watch. Again tweening a clipPath isn't really something you'll need flip for you can just use a normal tween for that. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/NWVdPxL?editors=0010

It is much easier to edit the properties you add by adding a class to a GSAP tween and make that all part of the timeline that gets controlled by ScrollTrigger, then to juggle classes that needs to be add or removed. So instead of having this in your css .header-active { opacity: 1; top: 4rem; }, just add it to your timeline mainTimeline.to('header', {opacity: 1, y: '4rem' ); that way it will reverse when you scroll up and play when scrolling down. Hope it helps and happy tweening! Edit: If you go that route be sure to remove transition: opacity .5s ease-out .5s, top .5s ease-out .5s; from your css You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete.

You can just set the height using the start and end properties. I don't know what 000 0 200vh would do, but I've modified your demo so that the end is at the bottom of the element + the window height time 2 eg 200vh. Now the pin lasts the height of the element times twice the window height. You can also set it to `top+=${window.innerHeight * 2} top`, so that it is just 200vh. With ScrollTrigger always enable markers, so that you can see what it is doing under the hood and for bonus points set the id of the ScrollTrigger for maxim readability! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/qBGqKgg?editors=0010

Yep. @Cassie also did some clever tricks with CSS, but most of the logic is set through the data attributes using HTML. It is a really clever setup, but when starting out I think ScrollTrigger is easier to learn, because you can first focus on the animation you want to happen and when you've got that you can hook it up to the scrollbar using ScrollTrigger. So my advise would be open up a codepen with your own layout and try adding some animations when you've got that try adding these animations to ScrollTrigger to see how they would work on scroll. Good luck and happy tweening!

Hi @Ahgogo welcome to the forum! What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! The demo you shared just uses the ScrollSmoother plugin https://gsap.com/docs/v3/Plugins/ScrollSmoother/ and not so much ScrollTrigger. ScrollSmoother uses the data-speed="1" attribute in the HTML to control the speed of the element to do its magic. As you can see it requires almost no setup to create a really cool effect, but it isn't ScrollTrigger, this uses a whole other logic to do its magic. If you're looking for inspiration check out these ScrollTrigger demo's check https://gsap.com/demos/?page=1&tags=ScrollTrigger If you're new to GSAP I highly recommend to check out this awesome getting started guide https://gsap.com/resources/get-started/ to familiarise yourself with the basics. Again we love to see what you can come up with yourself to better help you, just sharing a pen of someone else doesn't really help. Try getting your hand dirty by opening your own Codepen, this is the best way to learn. Hope it helps and happy tweening!

I would do something like this. You could add some more tweens to have different levels of opacity or if you want them to loop check out the Seamlessly loop helper function https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/ https://codepen.io/mvaneijgen/pen/XWwNKKO?editors=0010 A while back I've written something about an observation I've made what I see others do and also fall in to myself sometimes and that is optimising code before it is even working. What always helps me is just writing the whole animation out by hand which make it so you can see patterns emerging, when you've got that down it will be much easier to optimise code. Check out the post, maybe it also helps you in your endeavours. Happy tweening!

You don't want to create a function of the snap value ❌ snap: () => 1 / 4 ✅ snap: 1 / 4. Your code will calculate the value and then snap to that value eg 0.25, but I think you want to snap it to increments of 0.25 eg 0, 0.25, 0.5, 0.75, 1 which you get if you just feed it 1 / 4. When working with snap you can also feed it an array and thus just hard code the values, this is something I always like to do, to test if the math I'm using is correct with the values I want to get snap: [0, 0.25, 0.5, 0.75, 1] it is always a good idea to test your logic. Hope it helps and happy tweening!